<template>
    <div class="login">
        <div class="login-bg"></div>
        <!--  login-->
        <div class="login-wrap" @keyup.enter="doLogin">
            <p class="login-text">在线考试系统 / 用户登录</p>
            <div class="form-item">
                <el-input
                        autofocus
                        prefix-icon="el-icon-user"
                        placeholder="请输入账号"
                        v-model="user.username"
                        clearable>
                </el-input>
            </div>
            <div class="form-item">
                <el-input
                        prefix-icon="el-icon-lock"
                        placeholder="请输入密码"
                        v-model="user.password"
                        show-password>
                </el-input>
            </div>

            <div class="form-item">
                <el-input
                        style="width: 50%"
                        prefix-icon="el-icon-thumb"
                        placeholder="请输入验证码"
                        v-model="user.captcha"
                >
                </el-input>
                &emsp;<el-image
                    :src="captchaBase64Src"
                    @click="getCaptcha"
                    alt="验证码"
                    style="width: 130px;height: 40px;text-align: center;vertical-align: bottom;">
            </el-image>
            </div>
            <div class="form-item">
                <el-checkbox v-model="rememberme">记住密码</el-checkbox>
            </div>
            <div class="form-item">
                <el-button type="primary" style="width: 100%;" :loading="loading" @click="doLogin">
                    登录
                </el-button>
            </div>

        </div>
        <Copy/>
    </div>
</template>

<script>
    import Copy from "@/components/layouts/Copy";
    import {login, captcha} from "../api/common";

    export default {
        name: "Login",
        components: {Copy},
        data() {
            return {
                user: {username: '', password: '', captchaKey: "", captcha: ""},
                captchaBase64Src: "",
                loading: false,
                rememberme: false
            }
        },
        created() {
            this.getCaptcha();
            this.getRemembermeData();

        },
        methods: {
            getRemembermeData() {
                let data = JSON.parse(localStorage.getItem("voesLoginData"));
                console.log(data)
                if (data) {
                    this.user.username = data.username
                    this.user.password = data.password
                    this.rememberme = data.rememberme
                }
            },
            async getCaptcha() {
                const resp = await captcha();
                this.user.captchaKey = resp.data.captchaKey;
                this.captchaBase64Src = resp.data.captcha;
            },
            //验证
            check() {
                const user = this.user;
                if (user.username === '') {
                    this.$message.warning('请输入用户名')
                    return false;
                }
                if (user.password === '') {
                    this.$message.warning('请输入密码')
                    return false;
                }
                if (user.captcha === '') {
                    this.$message.warning('请输入验证码')
                    return false;
                }
                return true;
            },
            //登录
            async doLogin() {
                if (!this.check()) {
                    return false;
                }
                this.loading = true;
                const resp = await login(this.user)
                this.loading = false;
                if (resp.code === 200) {
                    this.$message.success('登录成功')
                    //存token
                    sessionStorage.setItem("token", resp.data.token)
                    this.$store.commit("setUser", resp.data.user)
                    //记住我
                    if (this.rememberme) {
                        localStorage.setItem("voesLoginData", JSON.stringify({
                            username: this.user.username,
                            password: this.user.password,
                            rememberme: true,
                        }))
                        console.log("rememberme")
                    } else {
                        localStorage.removeItem("voesLoginData")
                    }

                    let isAdmin = false;
                    let isEi = false;
                    resp.data.user.roles.forEach(role => {
                        if (role.roleKeyword === "ROLE_ADMIN") {
                            isAdmin = true;
                        }
                        if (role.roleKeyword === "ROLE_EXAMINEE") {
                            isEi = true;
                        }
                    })

                    if (isAdmin) {
                        sessionStorage.setItem("role", "admin")
                        await this.$router.push("/admin/index")
                    } else if (isEi) {
                        sessionStorage.setItem("role", "ei")
                        await this.$router.push("/ei")
                    } else {
                        sessionStorage.setItem("role", "admin")
                        await this.$router.push("/admin/index")
                    }
                } else {
                    this.getCaptcha();
                    this.$message.error(resp.message)
                }
            },
        }
    }
</script>

<style scoped lang="scss">
    .login-bg {
        //background-color: #0066A8;
        background: #fff url(../assets/bg.jpg) center top / cover no-repeat;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
    }

    .login-wrap {
        border-radius: 6px;
        background: #fff;
        width: 380px;
        padding: 15px 25px 5px;
        height: 360px;
        margin: auto;
        overflow: hidden;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;

        .login-text {
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            color: #707070;
        }

        .form-item {
            margin-top: 20px;
        }
    }
</style>